
<!--
 * @Author: Bennty
 * @Date: 2024-07-15 10:41:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-11 15:01:32
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"  
        :leave-active-class="proxy?.animate.searchAnimate.leave">
            <h1>{{ `${customerInfo?.customerName}跟进记录` }}</h1>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAdd">添加跟进记录</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="Delete">删除</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Back" @click="handleClickBack">回到上级</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="跟进状态" name="followStatus">
                    <followStatus :data="followStatusData" :contractMethod="contract_type" @submitDelete="handleClickDelete"/>
                </el-tab-pane>
                <el-tab-pane label="详细资料" name="details">
                    <followDetails :data="customerInfo"/>
                </el-tab-pane>
                <el-tab-pane label="操作状态" name="operatorStatus">
                    <operatorRecord :data="operationData" :operatorType="operation_type" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <el-dialog v-model="addVisible" title="添加跟进记录">
            <el-form :model="form" ref="formRef">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="选择沟通方式" prop="contactMethod">
                            <el-select v-model="form.contactMethod">
                                <el-option v-for="item in contract_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择下次联系时间" prop="nextContactDate">
                            <el-date-picker v-model="form.nextContactDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="跟进内容" prop="contractMessage">
                    <el-input type="textarea" v-model="form.contractMessage"></el-input>
                </el-form-item>
                <el-form-item label="添加图片" prop="image">
                    <el-upload class="avatar-uploader"
                        ref="uploadRef"
                        v-model:file-list="imageFileList"
                        :action="uploadImgUrl"
                        list-type="picture-card"
                        :headers="headers"
                        :on-remove="handleRemove"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="添加附件" prop="attach">
                    <el-upload class="upload-demo" v-model:file-list="attachList" :action="uploadImgUrl" :headers="headers" multiple ref="attachRef">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmitAddFollowRecord">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { TabsPaneContext,UploadInstance, UploadProps,FormInstance,UploadUserFile } from 'element-plus';
import followStatus from './components/followStatus.vue';
import followDetails from './components/followDetails.vue';
import operatorRecord from './components/operatorRecord.vue';
import { globalHeaders } from "@/utils/request";
import { getCustomerByIdApi } from '@/api/sj/customer-crm/index';
import {getFollowRecordByIdApi,addFollowRecordApi, getOperationByCustomerIdApi} from '@/api/sj/followRecord-crm/index';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { contract_type,operation_type } = toRefs<any>(proxy?.useDict('contract_type','operation_type'));
const router = useRouter();
const customerInfo = ref<any>();
const followStatusData = ref<any[]>([]);
const operationData = ref<any[]>([]);
const selectedId = ref<string|number>();
const formRef = ref<FormInstance>();
const addVisible = ref(false);
const fileType = ['image/jpeg','image/png'];
const headers = ref(globalHeaders);
const uploadRef = ref<UploadInstance>();
const attachRef = ref<UploadInstance>();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");

const customerId = computed(()=>{
    return router.currentRoute.value.fullPath.split('/')[3]
});

/** 根据客户id获取客户详细信息 */
const getCustomerInfo = async ()=>{
    const { data } = await getCustomerByIdApi(customerId.value);
    customerInfo.value = data;
};

/** 根据客户id获取跟进记录 */
const getFollowRecord = async ()=>{
    const { data } = await getFollowRecordByIdApi(customerId.value);
    followStatusData.value = data;
};

/** 根据客户id获取操作记录 */
const getOperationRecord = async () => {
    const { data } =  await getOperationByCustomerIdApi(customerId.value);
    operationData.value = data;
};

const imageFileList = ref<UploadUserFile[]>([]);

const attachList = ref<UploadUserFile[]>([]);

const initForm = {
    customerId: undefined,
    customerName: undefined,
    contactMethod: undefined,
    nextContactDate: undefined,
    contractMessage: undefined,
    imageIds: undefined,
    fileUrls: undefined,
    followType: 1
};
const data = reactive({
    form: {...initForm}
})

const { form } = toRefs(data);

const activeName = ref('followStatus');
const handleClickBack = ()=>{
    router.back();
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
};

const handleClickAdd = ()=>{
    addVisible.value = true;
};

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handleClose = ()=>{
    addVisible.value = false;
    formRef.value?.resetFields();
    uploadRef.value?.clearFiles();
    attachRef.value?.clearFiles();
};

const handleSubmitAddFollowRecord = async ()=>{
    const imageUrls = imageFileList.value.map((item:any)=>{
        return item.response.data.url
    });
    const attachUrls = attachList.value.map((item:any)=>{
        return item.response?.data?.url
    });
    const submitData = {...form.value};
    submitData.customerName = customerInfo.value.customerName;
    submitData.customerId = customerInfo.value.id;
    //@ts-ignore
    submitData.imageIds = [...imageUrls].join(',');
    //@ts-ignore
    submitData.fileUrls = [...attachUrls].join(',');
    // console.log(imageUrls);
    // console.log(attachUrls);
    await addFollowRecordApi(submitData).then((result)=>{
        if(result.code == 200){
            handleClose();
            getFollowRecord();
        }
    });
};

const handleSelectFellowRecord = (id:string|number)=>{
    selectedId.value = id;
};

const handleClickDelete = (result:boolean)=>{
    if(result){
        proxy?.$modal.msgSuccess("删除成功");
        getFollowRecord();
    }
};

onMounted(()=>{
    getCustomerInfo();
    getFollowRecord();
    getOperationRecord();
});

</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
.dialog-footer{
    display:flex;
    justify-content: center;
}
</style>